<template>
	<div class="app-container">
		<div style="margin-bottom: 20px;">
			<el-radio-group v-model="queryParams.orderStatus" @change="handleStatusGetList">
				<el-radio-button label="">全部订单</el-radio-button>
				<el-radio-button v-for="(item,index) in dict.type.scenic_spot_order_status" :label="item.value"
					:key="index">
					{{item.label}}
				</el-radio-button>
			</el-radio-group>
		</div>

		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="120px">
			<div class="app-space-between">
				<div class="app-space-between-left">
					<el-form-item label="订单编号" prop="orderNum">
						<el-input v-model="queryParams.orderNum" placeholder="请输入订单编号" clearable @clear="handleQuery"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="订单时间" prop="time">
						<el-date-picker v-model="queryParams.time" type="daterange" start-placeholder="开始日期"
							value-format="yyyy-MM-dd" end-placeholder="结束日期" @change="handleQuery"></el-date-picker>
					</el-form-item>
					<el-form-item label="门票信息" prop="proInfo">
						<el-input v-model="queryParams.proInfo" placeholder="请输入门票信息" clearable @clear="handleQuery"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="下单人电话" prop="userPhone">
						<el-input v-model="queryParams.userPhone" placeholder="请输入下单人电话" clearable @clear="handleQuery"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
				</div>
				<div class="app-space-between-right">
					<el-form-item>
						<el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
						<el-button size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="postList">
			<el-table-column label="订单编号" align="center" prop="orderId" min-width="210">
				<template slot-scope="scope">
					<span style="cursor: pointer;" @click="handleOrder(scope.row)">{{scope.row.orderId}}</span>
				</template>
			</el-table-column>
			<el-table-column label="门票信息" align="center" min-width="230">
				<template slot-scope="scope">
					{{scope.row.proInfoList[0].proName}} × {{scope.row.proInfoList[0].proNum}}
				</template>
			</el-table-column>
			<el-table-column label="下单人姓名" align="center" prop="userName" min-width="140" />
			<el-table-column label="下单人电话" align="center" prop="userPhone" min-width="160" />
			<el-table-column label="使用日期" align="center" min-width="160">
				<template slot-scope="scope">{{scope.row.updateTime | $YYYY_MM_DD}}</template>
			</el-table-column>
			<el-table-column label="订单金额" align="center" prop="totalPrice" min-width="160" />
			<el-table-column label="实付金额" align="center" prop="payPrice" min-width="160">
				<template slot-scope="scope">
					<div>
						<div v-if="scope.row.orderStatus == '10' || scope.row.orderStatus == '102'">0</div>
						<div v-else>{{scope.row.payPrice}}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="订单状态" align="center" prop="orderStatueName" min-width="160">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.scenic_spot_order_status" :value="scope.row.orderStatus" />
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" min-width="160">
				<template slot-scope="scope">{{scope.row.createTime | $YYYY_MM_DD_hh_mm_ss}}</template>
			</el-table-column>
		</el-table>

		<el-dialog title="提示" :visible.sync="open" width="800px">
			<!-- 详情 -->
			<el-form label-width="120px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="订单编号:">
							{{options.orderId}}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="订单时间:">
							{{options.createTime | $YYYY_MM_DD_hh_mm_ss}}
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="订单状态:">
							<dict-tag :options="dict.type.scenic_spot_order_status" :value="options.orderStatus" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="订单金额:">
							{{options.totalPrice || 0}} 元
						</el-form-item>
					</el-col>
				</el-row>

				<el-row v-if="options.orderStatus == 31 ||options.orderStatus == 32">
					<el-col :span="12">
						<el-form-item label="退款原因:">
							{{options.refundReason}}
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="下单姓名:">
							{{options.userName}}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="下单人电话:">
							{{options.userPhone}}
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>

					<el-col :span="24">
						<el-form-item label="使用日期:">
							{{options.updateTime |$YYYY_MM_DD}}
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="门票及游客信息:">
							<div class="vote-table">
								<div class="vote-table-item" v-for="(item,index) in options.infoList" :key="index">
									<div class="left">{{item.proName}}</div>
									<div class="right">
										<div v-for="(i,x) in item.visitorList" :key="x">
											<div class="right-text">姓名：{{i.name}}</div>
											<div class="right-text">手机号：{{i.phone}}</div>
											<div class="right-text">身份证号码：{{i.idCard}}</div>
										</div>
									</div>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="open = false">关 闭</el-button>
			</span>
		</el-dialog>


		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
	</div>
</template>
<script>
	import {
		getTicOrderPage,
		orderGetOrderById
	} from "@/api/scenicSpot/content.js";
	export default {
		dicts: ['scenic_spot_order_status'],
		data() {
			return {
				radio1: "",
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 岗位表格数据
				postList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				options: {},
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderStatus: "",
					orderNum: undefined,
					proInfo: undefined,
					userPhone: undefined,
					time: undefined
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					postName: [{
						required: true,
						message: "岗位名称不能为空",
						trigger: "blur"
					}],
					postCode: [{
						required: true,
						message: "标题名称不能为空",
						trigger: "blur"
					}],
					postSort: [{
						required: true,
						message: "岗位顺序不能为空",
						trigger: "blur"
					}]
				}
			};
		},
		created() {
			this.getList();
		},
		methods: {
			async handleOrder(options) { //详情
				try {
					this.open = true;
					let res = await orderGetOrderById({
						storeOrderId: options.storeOrderId,
						orderType: "TICKET"
					});
					options.infoList = res.data;
					options.refundReason = res.data[0].refundReason;
					console.log('查看详情：',options)
					this.options = options;
				} catch (err) {
					console.log(err);
				}
			},
			handleStatusGetList(orderStatus) {
				this.postList = [];
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					orderStatus,
					orderNum: undefined,
					proInfo: undefined,
					userPhone: undefined,
					time: undefined
				};
				this.getList();
			},
			goRouter() {},
			/** 查询岗位列表 */
			getList() {
				this.loading = true;
				let queryParams = JSON.parse(JSON.stringify(this.queryParams));
				if (queryParams.time) {
					queryParams.orderStartTime = queryParams.time[0]
					queryParams.orderEndTime = queryParams.time[1]
				}
				delete queryParams.time;
				getTicOrderPage(queryParams).then(response => {
					this.postList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					postId: undefined,
					postCode: undefined,
					postName: undefined,
					postSort: 0,
					status: "0",
					remark: undefined
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			}
		}
	};
</script>
<style lang="scss" scoped>
	.vote-table {
		.vote-table-item {
			display: flex;
			border: 1px solid #cccccc;

			.left {
				width: 220px;
				border-right: 1px solid #cccccc;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;

				.right-text {
					padding-left: 10px;
				}

				div {
					&+div {
						border-top: 1px solid #cccccc;
					}
				}
			}
		}
	}
</style>
